<!-- 商品详情 -->
<template>
<div class='product-box'>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="普通商品" name="first">
        <el-form v-model="form_1" label-width="120px" size="small">
            <el-row>
                <el-col :span="12">
                    <el-form-item  prop="productCategoryId" label="商品分类">
                        <el-cascader
                        change-on-select
                        v-model="form_1.productCategoryId"
                        :props="{
                            children: 'children',
                            value: 'id',
                            label: 'name',
                            expandTrigger: 'hover'
                        }"
                        :options="cateList">
                        </el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="name" label="商品名称">
                        <el-input v-model="form_1.name" placeholder="请输入商品名称" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="subTitle" label="副标题">
                        <el-input v-model="form_1.subTitle" placeholder="请输入副标题" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="name" label="商品种类">
                        <!-- <el-input v-model="form_1.name" placeholder="请选择商品种类" ></el-input> -->
                        <el-select>
                            <el-option v-for="(item, idx) in spzl" :key="idx"
                            :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="price" label="商品售价">
                        <el-input v-model="form_1.price" placeholder="请输入商品售价" type="number"  ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="originalPrice" label="市场价">
                        <el-input v-model="form_1.originalPrice" placeholder="请输入市场价" type="number" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="stock" label="商品库存">
                        <el-input v-model="form_1.stock" placeholder="请输入商品库存" type="number"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="unit" label="计量单位">
                        <el-select v-model="form_1.unit">
                            <el-option v-for="(item, idx) in unitOptions" :key="idx"
                            :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="feightTemplateId" label="运费模板">
                    <el-select
                        v-model="form_1.feightTemplateId"
                        placeholder="请选择运费模版">
                        <el-option
                                v-for="item in feightTemplateOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="sort" label="排序">
                        <el-input v-model="form_1.sort" placeholder="请输入排序" type="number"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="subTitle" label="赠送积分">
                        <el-input v-model="form_1.subTitle" placeholder="请输入副标题" ></el-input>
                    </el-form-item>
                </el-col>     
            </el-row>
            <el-row>  
                <el-col :span="4">
                    <el-form-item prop="subTitle" label="商品上架">
                        <el-switch
                            @change="handlePublishStatusChange(scope.$index, scope.row)"
                            :active-value="1"
                            :inactive-value="0"
                            >
                        </el-switch>
                    </el-form-item>
                </el-col>   
                <el-col :span="4">
                    <el-form-item prop="subTitle" label="分销商品">
                        <el-switch
                            @change="handlePublishStatusChange(scope.$index, scope.row)"
                            :active-value="1"
                            :inactive-value="0"
                            >
                        </el-switch>
                    </el-form-item>
                </el-col>      
                <el-col :span="4">
                    <el-form-item prop="subTitle" label="特价商品">
                        <el-switch
                            @change="handlePublishStatusChange(scope.$index, scope.row)"
                            :active-value="1"
                            :inactive-value="0"
                            >
                        </el-switch>
                    </el-form-item>
                </el-col>       
                <el-col :span="4">
                    <el-form-item prop="subTitle" label="精品课程">
                        <el-switch
                            @change="handlePublishStatusChange(scope.$index, scope.row)"
                            :active-value="1"
                            :inactive-value="0"
                            >
                        </el-switch>
                    </el-form-item>
                </el-col>    
                <el-col :span="4">
                    <el-form-item prop="subTitle" label="猜你喜欢">
                        <el-switch
                            @change="handlePublishStatusChange(scope.$index, scope.row)"
                            :active-value="1"
                            :inactive-value="0"
                            >
                        </el-switch>
                    </el-form-item>
                </el-col>              
            </el-row>

      <!-- <el-form-item label="商品规格：">
        <el-card shadow="never" class="cardBg">
          <div v-for="(productAttr,idx) in selectProductAttr">
            {{productAttr.name}}：
            <el-checkbox-group v-if="productAttr.handAddStatus===0" v-model="selectProductAttr[idx].values">
              <el-checkbox v-for="item in getInputListArr(productAttr.inputList)" :label="item" :key="item"
                           class="littleMarginLeft"></el-checkbox>
            </el-checkbox-group>
            <div v-else>
              <el-checkbox-group v-model="selectProductAttr[idx].values">
                <div v-for="(item,index) in selectProductAttr[idx].options" style="display: inline-block"
                     class="littleMarginLeft">
                  <el-checkbox :label="item" :key="item"></el-checkbox>
                  <el-button type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx,index)">删除
                  </el-button>
                </div>
              </el-checkbox-group>
              <el-input v-model="addProductAttrValue" style="width: 160px;margin-left: 10px" clearable></el-input>
              <el-button class="littleMarginLeft" @click="handleAddProductAttrValue(idx)">增加</el-button>
            </div>
          </div>
        </el-card>
        <el-table style="width: 100%;margin-top: 20px"
                  :data="value.skuStockList"
                  border>
          <el-table-column
                  v-for="(item,index) in selectProductAttr"
                  :label="item.name"
                  :key="item.id"
                  align="center">
            <template slot-scope="scope">
              {{getProductSkuSp(scope.row,index)}}
            </template>
          </el-table-column>
          <el-table-column
                  label="销售价格"
                  width="80"
                  align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.price"></el-input>
            </template>
          </el-table-column>
          <el-table-column
                  label="商品库存"
                  width="80"
                  align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.stock"></el-input>
            </template>
          </el-table-column>
          <el-table-column
                  label="库存预警值"
                  width="80"
                  align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.lowStock"></el-input>
            </template>
          </el-table-column>
          <el-table-column
                  label="SKU编号"
                  align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.skuCode"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="属性图片：" align="left">
            <template slot-scope="scope">
              <single-upload v-model="scope.row.pic"
                             style="width: 300px;display: inline-block;margin-left: 10px"></single-upload>
            </template>
          </el-table-column>
          <el-table-column
                  label="操作"
                  width="80"
                  align="center">
            <template slot-scope="scope">
              <el-button
                      type="text"
                      @click="handleRemoveProductSku(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button
                type="primary"
                style="margin-top: 20px"
                @click="handleRefreshProductSkuList">刷新列表
        </el-button>
        <el-button
                type="primary"
                style="margin-top: 20px"
                @click="handleSyncProductSkuPrice">同步价格
        </el-button>
      </el-form-item> -->


        </el-form>
    </el-tab-pane>
    <el-tab-pane label="积分商品" name="second"></el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {fetchListWithChildren} from '@/api/productCate'
import {fetchList as fetchFeightTemplateList} from '@/api/pms/feightTemplate';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    activeName: 'first',
    form_1: {
        productCategoryId: null, // 商品分类
        price: '', // 售价
        originalPrice: '', // 市场价
        stock: '', // 库存
        unit: '', // 计量单位
        sort: '', // 排序
        feightTemplateId: '',
        //选中的商品属性
        selectProductAttr: [],
    },
    cateList: [],
    spzl: [
        {label: '虚拟商品', value: '1'},
        {label: '实物商品', value: '2'}
    ],
    feightTemplateOptions: [],
    unitOptions:[{
        id: "个",
        name: "个",
    },
        {
        id: "箱",
        name: "箱",
        },
        {
        id: "条",
        name: "条",
        },

        {
        id: "盒",
        name: "盒",
        },{
        id: "包",
        name: "包",
        },{
        id: "斤",
        name: "斤",
        },{
        id: "两",
        name: "两",
        },{
        id: "件",
        name: "件",
        },{
        id: "瓶",
        name: "瓶",
        },{
        id: "千克",
        name: "千克",
        }],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    handleClick(){},
    getProductCateList () {
        fetchListWithChildren().then(res => {
            console.log(res)
            this.cateList = res.data || []
        })
    },
    getFeightTemplateList() {
        fetchFeightTemplateList({pageNum: 1, pageSize: 100}).then(response => {
            console.log(321321)
            this.feightTemplateOptions = [];
            let feightTemplateList = response.data.records;
            for (let i = 0; i < feightTemplateList.length; i++) {
            this.feightTemplateOptions.push({label: feightTemplateList[i].name, value: feightTemplateList[i].id});
            }
        }).catch(err => {
            console.log(err, 99999)
        });
    },    
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.getProductCateList();
    this.getFeightTemplateList();
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.product-box{
    width:1000px;
    margin: 20px auto;
}
</style>